<script setup lang="ts">
import imgUrl from '@/assets/sucai/user/1.webp'
interface BannerItem {
  id: number
  image: string
}
const list = ref<BannerItem[]>([
  {
    id: 1,
    image: imgUrl
  }
])

const { width } = useWindowSize()
const SwiperHeight = computed(() => {
  const bili = width.value / 1920
  return Number((240 * bili).toFixed(2)) + 'px'
})
</script>

<template>
  <div
    class="diy-swiper"
    :style="{ height: `${SwiperHeight}` }"
    v-if="list.length > 0"
  >
    <n-carousel show-arrow :show-dots="false" draggable>
      <img
        v-for="item in list"
        :key="item.id"
        class="carousel-img"
        :style="{ height: `${SwiperHeight}` }"
        :src="$getImg(item.image)"
        alt="图1"
      />
    </n-carousel>
  </div>
</template>

<style scoped lang="scss">
.carousel-img {
  width: 100%;
  object-fit: cover;
}
</style>
